<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
  <TITLE>QQ邮箱的弹出层</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    body {
      background: none repeat scroll 0 0 #FFFFFF;
      font-family: "lucida Grande",Verdana;
      font-size: 12px;
    }
    select, body, textarea {
      font-size: 12px;
    }
    .tipbg {
      margin: 0;
      padding: 0;
      background-color: transparent;
    }
    .qmpanel_shadow {
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
    }
    .bd_upload {
      border: 1px solid #628D0B;
    }
    .bd_upload {
      border: 1px solid #628D0B;
    }
    .fdbody {
      border-left: 8px solid #FFFFFF;
      border-right: 1px solid #87A34D;
    }
    .fdbody, .tipstitle {
      background: none repeat scroll 0 0 #9BBB59;
    }
    .editor_dialog_title {
      color: white;
      font: bold 12px "lucida Grande",Verdana;
      padding: 9px 0 7px 10px;
      text-align: left;
    }
    .editor_dialog_content {
      background: none repeat scroll 0 0 #FFFFFF;
      filter: none;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    .mailinfo {
      border-bottom: 2px solid #FFFFFF;
    }
    .mailinfo {
      background: none repeat scroll 0 0 #FFFFFF;
    }
    .cnfx_content {
      padding: 10px 0 5px 10px;
      text-align: left;
    }
    .cnfx_status {
      float: left;
      padding: 0 0 0 10px;
    }
    .cnfx_btn {
      padding: 0 10px 10px 0;
      text-align: right;
    }
    .b_size {
      font-size: 14px;
    }
    .editor_close {
      background: none repeat scroll 0 0 #DC4835;
    }
    /** when mouseover,add  editor_close_mover*/
    .editor_close, .editor_close_mover {
      border: 1px solid #A7190F;
      cursor: pointer;
      float: right;
      margin: 7px 7px 0 0;
    }
    .editor_close img, .editor_close_mover img, .editor_min img, .editor_min_mover img {
      display: block;
    }
    img {
      border: medium none;
    }
    .wd2 {
      margin: 1px 1px 0 0;
      width: 64px;
    }
    .btn, button, .qm_btn {
      padding-left: 0;
      padding-right: 0;
    }
    input, textarea, a {
      outline: medium none;
    }
    .editor_mask {
      background: none repeat scroll 0 0 #FFFFFF;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }
  </style>
  <script>
    ///////// 拖拽工具类 ////////
    var DragUtil = (function(){
      var doc = document;

      var moveX = 0;
      var moveY = 0;
      var moveTop = 0;
      var moveLeft = 0;
      var moveable = false;
      return {
        /**
         * 注册拖拽
         * 需要传入整个窗体id和标题部分的id
         */
        regist:function(winId,titleId) {
          // 页面头部要加上:
          // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          // 不然会有问题的
          var width = doc.documentElement.clientWidth;
          var height = doc.documentElement.clientHeight;
          var title = doc.getElementById(titleId);
          var win = doc.getElementById(winId);
          title.onmousedown = function() {
            var evt = DragUtil._getEvent();
            moveable = true;
            moveX = evt.clientX;
            moveY = evt.clientY;
            moveTop = parseInt(win.style.top);
            moveLeft = parseInt(win.style.left);

            doc.onmousemove = function() {
              if (moveable) {
                var evt = DragUtil._getEvent();
                var x = moveLeft + evt.clientX - moveX;
                var y = moveTop + evt.clientY - moveY;
                var w = parseInt(win.style.width);
                var h = parseInt(win.style.height);


                if ( x > 0 &&( x + w < width) && y > 0 && (y + h < height) ) {
                  win.style.left = x + "px";
                  win.style.top = y + "px";
                }
              }
            };
            doc.onmouseup = function () {
              if (moveable) {
                //doc.onmousemove = docMouseMoveEvent;
                //doc.onmouseup = docMouseUpEvent;
                moveable = false;
                moveX = 0;
                moveY = 0;
                moveTop = 0;
                moveLeft = 0;
              }
            };
          }
        }
        /**
         * 获取事件
         */
        ,_getEvent:function(){
          return window.event || arguments.callee.caller.arguments[0];
        }
      }
    })()
    ///////////////////////
    function init(){
      DragUtil.regist("WindowId","titleId")
      DragUtil.regist("WindowId2","titleId2")
    }
  </script>
</HEAD>
<BODY onload="init()">
<span id="qmdialog_container"><div
        style="z-index: 1120; position: absolute; width: 447px; height: 163px;  opacity: 1; left: 514px; top: 124px; margin-top: 0pt;"
        class="" id="WindowId" qmanimation_play="|undefined">
			<div class="tipbg">
				<div style="background: #DDD;" class="opashowOuter qmpanel_shadow"
                     id="QMconfirm___opashow_">
					<table cellspacing="0" cellpadding="0"
                           style="width: 447px; height: 163px;background: white;"
                           class="bd_upload">
						<tbody>
							<tr>
								<td
                                        style="height: 28px; border: none; background-image: none; cursor: move; overflow: hidden;"
                                        class="editor_dialog_titlebar fdbody"
                                        id="QMconfirm___title_td_"><div
                                        id="QMconfirm___title_div_"
                                        style="cursor: default; float: right; width: 40px; border: none; background-image: none;"
                                        class="fdbody">
	<div onmouseout="this.className='editor_close';"
         onmouseover="this.className='editor_close_mover';"
         class="editor_close" id="QMconfirm___closebtn2_">
	<img height="12" width="12" ondragstart="return false;" src="http://www.codefans.net/jscss/demoimg/201109/ico_closetip.gif">
	</div>
		</div>
			<div id="titleId" class="editor_dialog_title">删除确认</div>
				</td>
					</tr>
						<tr>
							<td valign="top"
                                style="height: 131px; border: medium none; visibility: visible;"
                                class="editor_dialog_content " id="QMconfirm___content_"><div
                                    class="mailinfo"
                                    style="border: none; height: 100%; display: inline;">
	<div class="">
	<div class="cnfx_content">
	<img align="absmiddle"
         style="float: left; margin: 5px 10px 0; display: block;"
         src="http://www.codefans.net/jscss/demoimg/201109/ico_question.gif">
	<table style="width: 350px; height: 80px;">
	<tbody>
	<tr>
	<td style="vertical-align: top;"><div class="b_size"
                                          style="padding-top: 10px; word-break: break-all; line-height: 150%;">
	<div>彻底删除后邮件将无法恢复，您确定要删除吗？</div>
	</div></td></tr></tbody>
	</table>
	</div>
	<div style="display: none;" class="cnfx_status">
	<input type="checkbox" id="QMconfirm__recordstatus"><label
            for="QMconfirm__recordstatus"></label>
</div>
<div class="cnfx_btn">
<input type="button" value="确定" id="QMconfirm__confirm"
       class="wd2 btn"><input type="button" value="取消"
                              style="display: ;" id="QMconfirm__cancel" class="wd2 btn"><input
        type="button" value="" style="display: none;"
        id="QMconfirm__never" class="wd2 btn">
</div>
</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</span>
<span id="qmdialog_container"><div
        style="z-index: 1120; position: absolute; width: 447px; height: 163px;  opacity: 1; left: 514px; top: 324px; margin-top: 0pt;"
        class="" id="WindowId2" qmanimation_play="|undefined">
			<div class="tipbg">
				<div style="background: #DDD;" class="opashowOuter qmpanel_shadow"
                     id="QMconfirm___opashow_">
					<table cellspacing="0" cellpadding="0"
                           style="width: 447px; height: 163px;background: white;"
                           class="bd_upload">
						<tbody>
							<tr>
								<td
                                        style="height: 28px; border: none; background-image: none; cursor: move; overflow: hidden;"
                                        class="editor_dialog_titlebar fdbody"
                                        id="QMconfirm___title_td_"><div
                                        id="QMconfirm___title_div_"
                                        style="cursor: default; float: right; width: 40px; border: none; background-image: none;"
                                        class="fdbody">
										<div onmouseout="this.className='editor_close';"
                                             onmouseover="this.className='editor_close_mover';"
                                             class="editor_close" id="QMconfirm___closebtn2_">
											<img height="12" width="12" ondragstart="return false;"
                                                 src="http://www.codefans.net/jscss/demoimg/201109/ico_closetip.gif">
										</div>
									</div>
									<div id="titleId2" class="editor_dialog_title">删除确认</div>
								</td>
							</tr>
							<tr>
								<td valign="top"
                                    style="height: 131px; border: medium none; visibility: visible;"
                                    class="editor_dialog_content " id="QMconfirm___content_"><div
                                        class="mailinfo"
                                        style="border: none; height: 100%; display: inline;">
										<div class="">
											<div class="cnfx_content">
												<img align="absmiddle"
                                                     style="float: left; margin: 5px 10px 0; display:none;"
                                                     src="http://www.codefans.net/jscss/demoimg/201109/ico_question.gif">
												<table style="width: 350px; height: 80px;">
													<tbody>
														<tr>
															<td style="vertical-align: top;"><div class="b_size"
                                                                                                  style="padding-top: 10px; word-break: break-all; line-height: 150%;">
																	<div>彻底删除后邮件将无法恢复，您确定要删除吗？</div>
																</div>
															</td>
														</tr>
													</tbody>
												</table>
											</div>
											<div style="display: none;" class="cnfx_status">
												<input type="checkbox" id="QMconfirm__recordstatus"><label
                                                    for="QMconfirm__recordstatus"></label>
											</div>
											<div class="cnfx_btn">
												<input type="button" value="确定" id="QMconfirm__confirm"
                                                       class="wd2 btn"><input type="button" value="取消"
                                                                              style="display: ;" id="QMconfirm__cancel" class="wd2 btn"><input
                                                    type="button" value="" style="display: none;"
                                                    id="QMconfirm__never" class="wd2 btn">
											</div>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</span>
</BODY>
</HTML>